<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .big{
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        .small{
            width: 100px;
            height: 100px;
            background-color: slateblue;
        }
    </style>
</head>
<body>
    <div id="app">
</div>
<script>
    
        var App ={
            template:`
            <div>
                <button @click="func">click</button>
                <button @click="func2('哈哈哈')">click2</button>
                <p v-for="item in list" :key="item.id">{{item.text}}</p>
                <div @click="bigClick" class="big">
                    <div @click.stop="smallClick" class="small"></div>
                </div>
                <a href="http://www.baidu.com" @click.prevent="aClick">baidu</a>
                <input type="text" v-model="searchValue" @keyup.enter="onenter"/>
                <input type="text" v-model="searchValue1" @change="change"/>
             </div>
            `,
            data() {
                return{
                    list:[
                    {text:'a',id:1},
                    {text:'b',id:2},
                    {text:'c',id:3},
                    {text:'d',id:4},
                    {text:'e',id:5},
                    ],
                    searchValue:'',
                    searchValue1:'',
                }
            },
            mounted(){//页面周期加载完毕立即调用这个方法
                this.func();
            },
            methods:{
                func(){
                    console.log(this);
                },
                func2(hhh){
                    console.log(hhh);
                },
                bigClick(){
                    alert('外层')
                },
                smallClick(){
                    alert('里层')
                },
                aClick(){
                    alert('跳转')
                },
                onenter(){
                    alert('成功'+this.searchValue)
                },
                change(e){
                    console.log(''+this.searchValue1);
                }
            }
        }
    
    new Vue({
    render: h => h(App)
    // render:h=>h('div',{
    //     attrs:{
    //         id:"box",
    //         class:'hhh'
    //     },
    //     style:{
    //         color:"red",
    //         fontSize: '30px'
    //     },
        
    // },[
    //     'aaa',
    //     h('a',{
    //         attrs:{href:'###'}
    //     },'哈哈哈哈')
    // ])
    }).$mount("#app")
</script>
</body>
</html>